<template>
  <div class="tab-container waybill-tab-container tab-fixed">
    <!-- <el-card shadow="never" class="margin-bottom">
      <el-row :gutter="6">
          <span>分配轨迹</span>
      </el-row>
    </el-card> -->
    <el-card shadow="never" class="margin-bottom">
      <el-row :gutter="6">
        <el-form
          ref="orderForm"
          :model="orderData"
          :rules="rules"
          size="mini"
          label-width="60px"
        >
          <el-col :span="3">
            <el-form-item label="运单号" prop="waybillNos">
              <el-input
                v-model="orderData.waybillNos"
                type="textarea"
                placeholder="请输入运单号"
                :autosize="{ minRows: 1, maxRows: 6 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="渠道" prop="inStockChannel">
              <el-select
                v-model="orderData.inStockChannel"
                placeholder="请选择下拉选择渠道"
                multiple
                clearable
                filterable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(k, v) in inStockChannelOptions"
                  :key="v"
                  :label="v"
                  :value="parseInt(k)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="仓库代码" prop="dispatchAddressCode">
              <!--<el-input
                v-model="orderData.dispatchAddressCode"
                placeholder="请输入仓库代码"
                clearable
                :style="{ width: '100%' }"
              ></el-input>-->
              <el-select v-model="orderData.dispatchAddressCode" placeholder="请选择仓库代码" clearable filterable multiple
                         :style="{width: '100%'}">
                <el-option v-for="(item, value) in shippingfbastockMap" :key="value" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="派送方式" prop="trackNumber">
              <el-input
                v-model="orderData.trackNumber"
                placeholder="请输入派送方式"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="当前轨迹" prop="status">
              <el-select
                v-model="orderData.status"
                placeholder="当前轨迹"
                clearable
                filterable
                multiple
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(k, v) in statusOptions"
                  :key="k"
                  :label="m(statusOptions[v])"
                  :value="parseInt(v)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="分单号" prop="status">
              <el-select
                v-model="orderData.singleWaybillNo"
                placeholder="分单号"
                clearable
                filterable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="k in singleWaybillNoMap"
                  :key="k"
                  :label="k"
                  :value="k"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-form-item label="">
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="initPageData"
              >
                seach
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-form-item label="">
              <el-button type="primary" size="mini" @click="reset">
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-card>
    <el-card shadow="never" class="margin-bottom">
      <el-row :gutter="2">
        <el-form
          ref="remarkForm"
          :model="remarkData"
          :rules="rules"
          size="mini"
          label-width="100px"
        >
          <el-col :span="4">
            <div class="block">
              <span class="demonstration"></span>
              <el-date-picker
                v-model="statuData"
                suffix-icon="el-icon-date"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
          </el-col>
          <el-col :span="2">
            <span v-if="this.multipleSelection.length > 0">
              <!-- <span v-if="this.multipleSelection[0].status === 105">
               <span v-if="scope.row.arrivalPortInspectionTime != null">
                  清关查验中
                </span>
                <span v-else>待清关放行</span>
              </span>
              <span v-if="this.multipleSelection[0].status === 110"
                >待清关放行</span
              >
              <span v-if="this.multipleSelection[0].status === 120"
                >待到仓</span
              >
              <span v-if="this.multipleSelection[0].status === 130"
                >待转运</span
              >
              <span v-if="this.multipleSelection[0].status === 135"
                >部分签收</span
              >
              <span v-if="this.multipleSelection[0].status === 140"
                >待签收</span
              > -->
              {{ statusMap[this.multipleSelection[0].status] }}
            </span>
          </el-col>
          <el-col :span="2">
            <el-form-item label="">
              <el-button type="primary" size="mini" @click="allocationTrace">
                确定</el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-card>

    <el-card shadow="never">
      <!-- <el-table :data="tableData" stripe style="width: 100%"> -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="statusShow"
      >
        <el-table-column type="selection" width="30" :selectable="selectable">
        </el-table-column>
        <el-table-column prop="waybillNo" label="运单号" width="180%">
        </el-table-column>
        <el-table-column
          prop="referenceNo"
          label="参考号"
          width="180%"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="trackNumber"
          label="追踪号"
          width="180%"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="waybillSingleId" label="所属分单" width="180%">
          <template slot-scope="scope">
            <!-- <span v-if="fbaCodeMap[scope.row.waybillSingleId]">{{ -->
            <!-- {{ fbaCodeMap[scope.row.waybillSingleId] }} -->
            <!-- }}</span> -->
            <!-- <span v-if="scope.row.waybillSingleId === fbaCodeMap[]."
              >待确认</span
            > -->
            <div v-for="(v, i) in fbaCodeMap" :key="i">
              <span
                v-if="
                  v.id === scope.row.waybillSingleId && v.waybillNo !== null
                "
              >
                {{ v.waybillNo }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="customerTotalPackages" label="件数" width="180%">
        </el-table-column>
        <el-table-column prop="inStockChannel" label="渠道" width="180%">
          <template slot-scope="scope">
            <span>{{ inStockChannelOptions[scope.inStockChannel] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="dispatchAddressCode"
          label="仓库代码"
          width="120%"
        >
        </el-table-column>
        <el-table-column prop="trackNumber" label="派送方式" width="180%">
          <template slot-scope="scope">
            <span v-if="scope.row.trackNumber === null">卡车派送</span>
          </template>
        </el-table-column>
        <el-table-column prop="tmpStatus" label="当前轨迹" width="180%">
          <template slot-scope="scope">
            <!-- <span v-if="scope.row.status === 10">待确认</span>
            <span v-if="scope.row.status === 20">待交寄</span>
            <span v-if="scope.row.status === 30">待入库</span>
            <span v-if="scope.row.status === 40">待出库</span>
            <span v-if="scope.row.status === 50">待上网</span>
            <span v-if="scope.row.status === 60">待报关</span>
            <span v-if="scope.row.status === 65">
              <span v-if="scope.row.departurePortInspectionTime != null"
                >报关检查中</span
              >
              <span v-else>待放行</span>
            </span>
            <span v-if="scope.row.status === 70">待放行</span>
            <span v-if="scope.row.status === 80">待离港</span>
            <span v-if="scope.row.status === 90">待到港</span>
            <span v-if="scope.row.status === 100">待清关</span>
            <span v-if="scope.row.status === 105">
              <span v-if="scope.row.arrivalPortInspectionTime != null"
                >清关查验中</span
              >
              <span v-else>待清关放行</span>
            </span>
            <span v-if="scope.row.status === 110">待清关放行</span>
            <span v-if="scope.row.status === 120">待到仓</span>
            <span v-if="scope.row.status === 130">待转运</span>
            <span v-if="scope.row.status === 135">部分签收</span>
            <span v-if="scope.row.status === 140">待签收</span>
            <span v-if="scope.row.status === 888">待锁单</span>
            <span v-if="scope.row.status === 999">已完成</span> -->
            <span v-if="scope.row.status != null">
              <span
                v-if="
                  scope.row.arrivalPortInspectionTime != null &&
                    scope.row.status === 105
                "
              >
                清关查验中
              </span>
              <span v-else>{{ statusMap[scope.row.status] }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="statustime" label="上一个轨迹时间" width="200%">
          <template slot-scope="scope">
            <span v-if="scope.row.status >= 105 && scope.row.status <= 140">
              <span
                v-if="
                  scope.row.status === 105 && scope.row.arrivalPortTime != ''
                "
              >
                <span v-if="scope.row.arrivalPortTime != ''">
                  {{ scope.row.arrivalPortTime }}
                </span>
              </span>
              <span
                v-else-if="
                  scope.row.status === 110 && scope.row.clearanceTime != ''
                "
              >
                <span v-if="scope.row.arrivalPortTime != ''">
                  {{ scope.row.clearanceTime }}
                </span>
              </span>
              <span
                v-else-if="
                  scope.row.status === 120 &&
                    scope.row.clearanceReleaseTime != ''
                "
              >
                <span v-if="scope.row.arrivalPortTime != ''">
                  {{ scope.row.clearanceReleaseTime }}
                </span>
              </span>
              <span
                v-else-if="
                  scope.row.status === 130 && scope.row.arrivalStockTime != ''
                "
              >
                <span v-if="scope.row.arrivalPortTime != ''">
                  {{ scope.row.arrivalStockTime }}
                </span>
              </span>
              <span
                v-else-if="
                  scope.row.status === 140 && scope.row.arrivalPortTime != ''
                "
              >
                <span v-if="scope.row.arrivalPortTime != ''">
                  {{ scope.row.dispatchTime }}
                </span>
              </span>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- </el-table> -->
    </el-card>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import * as constant from "@/store/yg/common/constant";
import axios from "axios";
import { m } from "@/store/yg/common/local";
import LoginVue from "../../../../yg/auth/Login.vue";

export default {
  props: [],
  data() {
    return {
      selectable(row) {
        if (row.status > 140 || row.status < 105) {
          return 0;
        } else {
          return 1;
        }
      },
      rules: {},
      statuData: "",
      pickerOptions: {
        disabledDate(time) {
          // return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      multipleSelection: [], //批量操作选中
      userOptions: {},
      remarkData: {},
      inStockChannelOptions: {},
      shippingfbastockMap: {},
      statusOptions: {},
      tableData: [
        {
          waybillId: 0,
          waybillNo: "",
          referenceNo: "",
          waybillSingleId: 0,
          customerTotalPackages: "",
          trackNumber: "",
          inStockChannel: "2016-05-02",
          waybillSingleNo: "",
          fbaCode: "",
          status: "",
          statustime: ""
        }
      ],
      orderData: {
        waybillId: 0,
        mergeWaybillId: 0,
        inStockChannel: [],
        dispatchAddressCode: [],
        trackNumber: "",
        customerShortName: "",
        salesmanId: "",
        status: [],
        waybillNos: "",
        singleWaybillNo: ''
      },
      statusMap: {}, //运单状态
      fbaCodeMap: [],
      singleWaybillNoMap: [],
      waybillInfo: {
        waybillId: 0,
        waybillStatus: undefined //选中的分单状态
      },
      receiveTypeOptions: [
        {
          label: "销售",
          value: 0
        },
        {
          label: "客服",
          value: 1
        }
      ],
      synTraceOptions: [
        {
          label: "是",
          value: 1
        },
        {
          label: "否",
          value: 0
        }
      ],
      urgencytypeOptions: [
        {
          label: "红",
          value: 0
        },
        {
          label: "黄",
          value: 1
        },
        {
          label: "灰",
          value: 2
        }
      ]
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initUserOptions("userSource");
    this.initChannelOptions("customerChannelSource");
    this.initStatusOptions("waybillStatusSource");
    this.initshippingfbastockMap("shippingfbastockSource");
    this.initPageData();
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    m(key) {
      return m(key);
    },
    statusShow(val) {
      // this.waybillInfo.waybillStatus = this.multipleSelection[0].status;
      if (val.length > 0) {
        var status = val[0].status;
        val.forEach(element => {
          if (element.status != status) {
            this.$message.error("有不同节点的单号,请重新勾选");
            return;
          } else {
            this.multipleSelection = val;
            // var status = this.multipleSelection[0].status;
          }
        });
        console.log(this.multipleSelection);
        console.log(this.multipleSelection[0].status);
      }
    },
    async allocationTrace() {
      const status = this.multipleSelection[0].status;
      const waybillIds = [];
      for (let index = 0; index < this.multipleSelection.length; index++) {
        if (status != this.multipleSelection[index].status) {
          this.$message.error("有不同节点，请重新选择分配");
          return;
        }
        waybillIds.push(this.multipleSelection[index].id); //获取到选中的ID
      }
      var param = {};
      this.orderData.waybillId = this.$route.query.waybillId;
      param["statuData"] = this.statuData;
      // param["waybillArray"] = this.multipleSelection;
      param["mergeWaybillId"] = this.$route.query.waybillId;
      param["status"] = status; //分配的状态
      param["waybillIds"] = waybillIds; //选中的ID
      ajax("allocationTrace", param).then(
        res => {
          if (res.code != 200) {
            this.$message.error(res.message);
            console.log(res.message);
          } else {
            // this.tableData = res.data;
            this.$message.success("操作成功");
            sessionStorage.setItem("orderData", JSON.stringify(this.orderData));
            setTimeout(() => {
              location.reload();
            }, 2000);

            // this.initPageData();
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    reset() {
      // this.orderData = {};
      location.reload();
    },

    initPageData() {
      var param = {};
      if (sessionStorage.getItem("orderData")) {
        this.orderData = JSON.parse(sessionStorage.getItem("orderData"));
      }

      this.waybillInfo = this.$route.query;
      this.orderData.waybillId = this.waybillInfo.waybillId;
      param = this.orderData;
      // const waybillId = localStorage.getItem("toallocationtrace_waybillId");
      // param["waybillId"] = waybillId;
      ajax("manageAllocationTrace", param).then(
        res => {
          if (res.code != 200) {
            if(res.message) {
              this.$message.error(res.message);
            }
          } else {
            this.tableData = res.data;
            this.statusMap = res.data2.statusMap;
            this.fbaCodeMap = res.data2.fbaCodeMap;
            if (this.fbaCodeMap){
              this.fbaCodeMap.forEach(p => {
                if (this.singleWaybillNoMap.indexOf(p.waybillNo)<0) {
                  this.singleWaybillNoMap.push(p.waybillNo);
                }
              });
            }
            sessionStorage.clear("orderData");
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    initUserOptions(bean) {
      var uri = "/api/entry/source?bean=" + bean;
      axios.post(constant.API_SERVER + uri).then(
        response => {
          this.userOptions = response.data;
        },
        error => {
          console.info(error);
        }
      );
    },
    initChannelOptions(bean) {
      var uri = "/api/entry/source?bean=" + bean;
      axios.post(constant.API_SERVER + uri).then(
        response => {
          this.inStockChannelOptions = response.data;
        },
        error => {
          console.info(error);
        }
      );
    },
    initStatusOptions(bean) {
      var uri = "/api/entry/source?bean=" + bean;
      axios.post(constant.API_SERVER + uri).then(
        response => {
          this.statusOptions = response.data;
        },
        error => {
          console.info(error);
        }
      );
    },
    initshippingfbastockMap(bean) {
      var uri = "/api/entry/source?bean=" + bean;
      axios.post(constant.API_SERVER + uri).then(
        response => {
          this.shippingfbastockMap = response.data;
        },
        error => {
          console.info(error);
        }
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.title-icon {
  display: inline-block;
  width: 120px;
}
</style>

<style scoped>
/deep/ .el-tabs__item.is-disabled {
  color: #51abd1;
}
</style>
